<template>
  <div class="app-container">
    <!-- 查询栏 -->
    <el-card>
      <div slot="header">
        选择行政班级
      </div>
      <el-row>
        <el-col>
          <el-form inline>
            <el-form-item label="专业">
              <el-select v-model="majorId" @change="majorChange">
                <el-option
                  v-for="ma in majorDropdownData "
                  :key="ma.value"
                  :label="ma.label"
                  :value="ma.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="班级">
              <el-select v-model="classId" @change="classChange">
                <el-option
                  v-for="cl in classDropdownData "
                  :key="cl.value"
                  :label="cl.label"
                  :value="cl.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <!-- 数据栏 -->
    <el-card style="margin-top: 20px;">
      <div slot="header">
        绑定班级必修课的开课信息
      </div>
      <el-table :data="majorRequireCourseData">
        <el-table-column prop="courseName" label="课程名称" />
        <el-table-column prop="yearOrderNum" label="开课学年" />
        <el-table-column prop="termOrderNum" label="开课学期" />
        <el-table-column label="已绑定开课名称">
          <template slot-scope="scope">
            {{ scope.row.csBinding? scope.row.csBinding.csName : '未绑定开课' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="openCsBinding(scope.row)">
              修改开课绑定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 开课绑定修改弹窗 -->
    <el-dialog width="30%" center title="修改开课绑定" :visible.sync="changeBindingShow" :before-close="cancelCsBinding">
      <el-form>
        <el-form-item label="选择开课">
          <el-select v-model="csBindingFormData.newCsId">
            <el-option v-for="it in csBindingDropData" :key="it.value" :label="it.label" :value="it.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="cancelCsBinding">取消</el-button>
          <el-button
            type="primary"
            plain
            :disabled="csBindingFormData.newCsId==null"
            @click="submitCsBinding"
          >
            修改绑定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>

</template>

<script>

import { getMajorDropDown, getEduClassDropDownByMajor, getCsDropdownListByCondition } from '@/api/ms/dropdown'

import { listByClass, update } from '@/api/ms/course/schedule/classRequireCourse'

import { listMajorRequireCourse } from '@/api/ms/course/teach/majorPlan'
import { getById as getClassById } from '@/api/ms/organization/org/eduClass'

export default {
  name: 'ClassCourse',
  components: {

  },
  data() {
    return {
      classId: null,
      majorId: null,
      classRegisterYear: null,
      majorDropdownData: [
        // { label: '专业1', value: 1 },
        // { label: '专业2', value: 2 },
        // { label: '专业3', value: 3 }
      ],
      classDropdownData: [
        // { label: '班级1', value: 1 },
        // { label: '班级2', value: 2 },
        // { label: '班级3', value: 3 }
      ],
      majorRequireCourseData: [ // 专业必修课程列表
        // { id: 1, planId: 1, courseId: 1, courseName: '大数据', yearOrderNum: 1, termOrderNum: 2 },
        // { id: 2, planId: 1, courseId: 1, courseName: '大数据', yearOrderNum: 1, termOrderNum: 2 },
        // { id: 3, planId: 1, courseId: 1, courseName: '大数据', yearOrderNum: 1, termOrderNum: 2 }
      ],
      csBindingFormData: {
        oldId: null,
        oldCsId: null,
        newCsId: null
      },
      csBindingDropData: [],
      changeBindingShow: false
    }
  },
  mounted() {
    this.getDropDownData()
  },
  methods: {
    getDropDownData() { // 获取下拉数据
      getMajorDropDown().then(({ data }) => {
        this.majorDropdownData = data
        this.majorId = data[0].value
        this.refreshClassDropdown(this.majorId)
      }).catch(() => {})
    },
    majorChange(val) {
      this.refreshClassDropdown(val)
      this.majorRequireCourseData = []
    },
    refreshClassDropdown(val) {
      this.classId = null
      getEduClassDropDownByMajor(val).then(({ data }) => {
        this.classDropdownData = data
      }).catch(() => {})
    },
    classChange(val) {
      // 先刷新班级的注册年份数据
      getClassById(this.classId).then(({ data }) => {
        this.classRegisterYear = data.registerYear
        this.refreshData()
      }).catch(() => {})
    },
    refreshData() { // 刷新表格数据
      listMajorRequireCourse(this.majorId).then(({ data }) => { // 获取专业必修课程列表
        this.majorRequireCourseData = data
        this.postProcessMrCourse()
      }).catch(() => {})
    },
    postProcessMrCourse() {
      // 获取已有的必修课开课绑定
      listByClass(this.classId).then(({ data }) => {
        this.majorRequireCourseData.forEach((it) => {
          it.yearOrderNum = this.classRegisterYear + it.yearOrderNum - 1
          data.forEach(cc => {
            if (cc.courseId === it.courseId) {
              it.csBinding = {
                id: cc.id,
                csId: cc.courseScheduleId,
                csName: cc.courseScheduleName
              }
            }
          })
        })
      })
    },
    openCsBinding(data) {
      // 初始化表单数据
      const oldBind = data.csBinding
      if (oldBind) {
        this.csBindingFormData.oldId = oldBind.id
        this.csBindingFormData.oldCsId = oldBind.csId
        this.csBindingFormData.newCsId = oldBind.csId
      }
      // 获取绑定下拉数据
      const reqData = {
        courseId: data.courseId,
        teachYear: data.yearOrderNum,
        teachTerm: data.termOrderNum
      }
      getCsDropdownListByCondition(reqData).then(({ data }) => {
        this.csBindingDropData = data
        this.changeBindingShow = true
      })
    },
    cancelCsBinding() {
      this.csBindingFormData = {
        oldId: null,
        oldCsId: null,
        newCsId: null
      }
      this.changeBindingShow = false
    },
    submitCsBinding() {
      const reqData = {
        oldId: this.csBindingFormData.oldId,
        newCourseScheduleId: this.csBindingFormData.newCsId,
        oldCourseScheduleId: this.csBindingFormData.oldCsId,
        classId: this.classId
      }
      if (reqData.newCourseScheduleId === reqData.oldCourseScheduleId) {
        this.$message.info('选择未改变,取消绑定修改')
        this.cancelCsBinding()
        return
      }
      update(reqData).then(({ message }) => {
        this.$message.success(message)
        this.cancelCsBinding()
        this.refreshData()
      }).catch(() => {})
    }
  }
}
</script>

<style>

</style>
